<%@ page import="com.online_video.entity.User" %>
<%@ page import="com.online_video.entity.Page" %><%--
  Created by IntelliJ IDEA.
  User: 渣全蛋
  Date: 2022/3/16
  Time: 16:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/titatoggle/2.1.2/titatoggle-dist-min.css" rel="stylesheet">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="../js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/sweetalert.min.js"></script>
    <%
        Page<User> userPage = (Page<User>) request.getAttribute("userPage");
    %>
</head>
<body>
<%@include file="plugins/navbar.jsp"%>
<br><br><br>
<h2 class="sub-header">用户管理</h2>
<div class="table-responsive">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>编号</th>
            <th>用户头像</th>
            <th>用户姓名</th>
            <th>用户昵称</th>
            <th>邮箱</th>
            <th>联系电话</th>
            <th>是否VIP</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <%
            if (userPage == null) {
                response.sendRedirect("./admin.do?action=page");
            } else {
                for (int i = 0; i < userPage.getItems().size(); i++) {
                    User user = userPage.getItems().get(i);
        %>
        <tr>
            <td><%=user.getId()%>
            </td>
            <td>
                <img  class="img-circle" src="/online_video/img/<%=user.getHeadportrait()%>" style="max-width: 80px;height: 80px"/>
            </td>
            <td><%=user.getUsername()%>
            </td>
            <td><%=user.getNickname()%>
            </td>
            <td><%=user.getEmail()%>
            </td>
            <td><%=user.getTelephone()%>
            </td>
            <td><%
                if (user.getIsvip() == 1) {
            %>
                         会员
                <%
                } else {
                %>
                         非会员
                <%
                    }
                %>
            </td>
            <td>
                <%
                    if (1 == user.getIsactive()) {
                %>
                <div class="form-check checkbox-slider--b-flat checkbox-slider-md">
                    <label>
                        <input id="enable" type="checkbox" checked
                               onclick="setActive($(this).parents('tr').children('td:eq(0)').text().trim(),0)"><span
                            class="indicator-success"></span>
                    </label>
                </div>
                <%
                } else {
                %>
                <div class="form-check checkbox-slider--b-flat checkbox-slider-md">
                    <label>
                        <input id="ban" type="checkbox"
                               onclick="setActive($(this).parents('tr').children('td:eq(0)').text().trim(),1)"><span
                            class="indicator"></span>
                    </label>
                </div>
                <%
                    }

                %>

            </td>
            <td>
                <button type="button" class="btn btn-info btn-product-modify" data-toggle="modal" data-target="#myModal" onclick="modify($(this).parents('tr').children('td:eq(0)').text().trim())">修改</button>
                <button class="btn btn-danger btn-product-del" onclick="deleteAlet($(this).parents('tr').children('td:eq(0)').text().trim())">删除</button>
            </td>
        </tr>
        <%
                }
            }
        %>
        </tbody>
    </table>
    <%--分页start--%>
    <nav aria-label="Page navigation"  style="margin-left: 40%">
        <ul class="pagination">
            <%
                if (userPage!=null){
                    if (userPage.getPageNo() > 1) {
            %>
            <li>
                <a href="./admin.do?action=page&pageNo=1&pageSize=<%=userPage.getPageSize()%>">首页</a>
            </li>
            <li>
                <a href="./admin.do?action=page&pageNo=<%=userPage.getPageNo()-1%>"
                   aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <%
                }
            %>

            <%
                int beginPageNo = 0;
                int endPageNo = 0;
                //情况1：如果总页码小于等于5 的情况，页码的范围是：1-总页码
                if (userPage.getPageTital() <= 5) {
                    beginPageNo = 1;
                    endPageNo = userPage.getPageTital();
                } else {
                    //情况2：总页码大于5 的情况
                    if (userPage.getPageNo() <= 3) {
                        //小情况1：当前页码为前面3 个：1，2，3 的情况，页码范围是：1-5
                        beginPageNo = 1;
                        endPageNo = 5;
                    } else if (userPage.getPageNo() >= (userPage.getPageTital() - 2)) {
                        //小情况2：当前页码为最后3 个，8，9，10，页码范围是：总页码减4 - 总页码
                        beginPageNo = userPage.getPageTital() - 4;
                        endPageNo = userPage.getPageTital();
                    } else {
                        //小情况3：4，5，6，7，页码范围是：当前页码减2 - 当前页码加2
                        beginPageNo = userPage.getPageNo() - 2;
                        endPageNo = userPage.getPageNo() + 3;
                    }
                }
            %>

            <%
                for (int i = beginPageNo; i <= endPageNo; i++) {
                    if (i == userPage.getPageNo()) {
            %>
            <li>
                <a href="./admin.do?action=page&pageNo=<%=i%>&pageSize=<%=userPage.getPageSize()%>"><<%=i%>>
                </a>
            </li>
            <%
            } else {
            %>
            <li>
                <a href="./admin.do?action=page&pageNo=<%=i%>&pageSize=<%=userPage.getPageSize()%>"><%=i%>
                </a>
            </li>
            <%
                    }
                }
            %>
            <%
                if (userPage.getPageNo() < userPage.getPageTital()) {
            %>
            <li>
                <a href="./admin.do?action=page&pageNo=<%=userPage.getPageNo()+1%>" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li>
                <a href="./admin.do?action=page&pageNo=<%=userPage.getPageTital()%>&pageSize=<%=userPage.getPageSize()%>">末页</a>
            </li>
            <%
                }
                }
            %>

        </ul>
    </nav>
    <%--分页end--%>
</div>
<%--modal模态框 strat--%>
<div class="modal fade" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <div class="modal-title" id="modal-title">
                    <h4>修改用户信息</h4>
                </div>
            </div>
               <div class="modal-body container">
                   <div class="row">
                       <div class="col-md-4 col-md-offset-1 form-group">
                           <input type="hidden" value="" id="u_id">
                           <label for="userName" class="control-label">用户姓名</label> <input type="text" class="text form-control" id="userName" name="userName">
                           <label for="nickName" class="control-label">用户昵称</label><input type="text" class="text form-control" id="nickName" name="nickName">
                           <label for="email" class="control-label">邮箱</label><input type="text" class="text form-control" id="email" name="email">
                           <label for="phone" class="control-label">电话</label><input type="text" class="text form-control" id="phone" name="phone">
                           <label  class="control-label">VIP</label>
                           <div class="radio">
                               <label class="radio-inline" >
                                   <input type="radio" name="isVip" id="isVip1" value="0">非会员
                               </label>
                               <label class="radio-inline">
                                   <input type="radio" name="isVip" id="isVip2" value="1">会员
                               </label>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                   <button type="button" class="btn btn-primary" id="btn-submit">提交更改</button>
               </div>
        </div>
    </div>
</div>
<%--模态框 end--%>

<table width="60%" align="right">
    <tr>
        <td>
            <div id="changePages" name="changePages"></div>
        </td>
    </tr>
</table>
<script>
    window.jQuery || document.write(
        '<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"><\/script>'
    )
</script>
<script type="text/javascript">
    /*删除当前选定的用户信息*/
    var deleteAlet = function (id) {
        swal({
            title: "确认删除",
            text: "是否确认删除改条记录",
            icon: "warning",
            buttons: {
                catch: {
                    text: "确认",
                    value: true,
                },
                cancel: "取消"
            }
        }).then((isOk)=> {
            console.log(isOk);
            if (isOk) {
              $.ajax({
                  dataType: "text",
                  method: "POST",
                  url: './admin.do?action=delete',
                  async: true,
                  data:{
                      id:id,
                  },success:(data)=>{
                      if (data!=null&&data!=""){
                          var parse = JSON.parse(data);
                          if (parse==="1"){
                              swal("删除成功").then((isContinue)=>{
                                  if (isContinue){
                                      window.location.reload();
                                  }
                              })
                          }
                      }
                  }

              })
            }
        });
    };
    //滑块按钮功能 禁用/启用当前账号
    function setActive(id, state) {
        console.log(id);
        $.ajax({
            dataType: "text",
            method: "POST",
            url: './admin.do?action=update',
            async: true,
            data: {
                /* action: "update",*/
                id: id,
                isActive: state
            }, success: (data) => {
                if (data != null && data != "") {
                    var parse = JSON.parse(data);
                    if (parse === "1") {
                        swal({
                            title:"操作该账号",
                            icon: "success",
                            text:"操作成功",
                           }).then((isContinue)=>{
                               if (isContinue){
                                   window.location.reload();
                               }
                           })
                    }
                }
            }
        })
    }
    /*回填模态框用户信息*/
    function modify(id){
        $.ajax({
            dataType: "text",
            method: "POST",
            url: './admin.do?action=queryByid',
            async: true,
            data:{id:id},
            success:(data)=>{
                if (data!=null&&data!=""){
                    var user = JSON.parse(data);
                    console.log(user);
                        $("#userName").val(user.username);
                        $("#nickName").val(user.nickname);
                        $("#email").val(user.email);
                        $("#phone").val(user.telephone);
                        $("#u_id").val(user.id);
                        if (1===user.isvip){
                            $('#isVip2').attr("checked",true)
                        }else if (0===user.isvip){
                            $('#isVip1').attr("checked",true)
                        }
                }
            }
        })
    }
    /*模态框点击保存保存用户信息*/
    $('#btn-submit').click(function (){
        var id = $("#u_id").val();
        var userName = $("#userName").val();
        var nickName = $("#nickName").val();
        var email = $("#email").val();
        var phone = $("#phone").val();
        var isVip = $("input[name=isVip]:checked").val()
        $.ajax({
            dataType: "text",
            method: "POST",
            url: './admin.do?action=update',
            async: true,
            data:{
                id:id,
                userName:userName,
                nickName:nickName,
                email:email,
                phone:phone,
                isVip:isVip,
            },success:(data)=>{
                if (data!=null&&data!=""){
                    var parse = JSON.parse(data);
                    if ("1"===parse){
                        swal("信息已保存").then((isContinue)=>{
                            if (isContinue){
                                window.location.reload();
                            }
                        })
                    }else if ("-1"===parse){
                        swal({
                            title:"信息未填写完整",
                            icon:"error",
                            text:"请把信息补全",
                            catch: {
                                text:"了解！",
                                value: true,
                            }
                        })
                    }
                }
            }
        })
    })
</script>
</body>
</html>